<template>
    <div class="table">
        <!-- 页面表格begin -->
        <div class="crumbs">
            <!-- 页面标题begin -->
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-tickets"></i> 角色管理</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <!-- 页面标题end-->
        <div class="container">
            <!-- 页面内容区begin -->
            <div id="app">
                <div style=" width:50%;float:left;">

                    角色名称：
                    <el-input v-model="s_rolename" label="角色编码" placeholder="角色编码" style="width:200px; heght:30px;" size="mini"></el-input>

                    角色编码：
                    <el-input v-model="s_rolecode" label="角色编码" placeholder="角色编码" style="width:200px; heght:30px;" size="mini"></el-input>

                    <el-button type="success" icon="el-icon-search" @click="getResult(1)" size="mini">搜索</el-button>
                    <br>
                    <br>

                    <!--新增按钮-->
                    <div class="clearfix">
                        <el-col :span="1" class="grid">
                            <el-button type="success" icon="el-icon-circle-plus-outline" @click="handleAdd" size="mini" round>新增</el-button>
                        </el-col>
                    </div>

                    <!--表格数据及操作-->
                    <el-table :data="tableData" class="mgt20" border style="width: 100%" stripe ref="multipleTable" tooltip-effect="dark" @row-click="clickRow">
                        <!--勾选框-->
                        <el-table-column type="selection" width="55">
                        </el-table-column>
                        <!--索引-->
                        <el-table-column type="index" :index="indexMethod">
                        </el-table-column>
                        <el-table-column prop="roleName" label="角色名称" width="180" sortable>
                        </el-table-column>
                        <el-table-column prop="roleCode" label="角色编码" width="180">
                        </el-table-column>
                        <el-table-column prop="roleType" label="角色类型">
                        </el-table-column>

                        <el-table-column label="编辑" width="100">
                            <template slot-scope="scope">
                                <el-button type="primary" icon="el-icon-edit" size="mini" @click="enditRole(scope.row)">编辑</el-button>
                            </template>
                        </el-table-column>
                        <el-table-column label="删除" width="100">
                            <template slot-scope="scope">
                                <el-button type="danger" icon="el-icon-delete" @click="delRole(scope.row)" size="mini">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <br>
                    <br>
                    <!--分页条total, sizes, prev, pager, next, jumper-->

                    <el-pagination @size-change="handleSizeChange" @current-change="getResult" :current-page="currentPage" :page-size="pageSize" layout="total, prev, pager, next" :total="roletotal">
                    </el-pagination>
                    <!--新增界面-->
                    <el-dialog title="新增" :visible.sync="addFormVisible" :close-on-click-modal="false">
                        <el-form :model="addForm" :rules="addFormRules" ref="addForm" label-width="166px">
                            <el-form-item label="角色名称" prop="roleName">
                                <el-input v-model="addForm.roleName" auto-complete="off" style="width:400px;"></el-input>
                            </el-form-item>
                            <el-form-item label="角色编码" prop="roleCode">
                                <el-input v-model="addForm.roleCode" auto-complete="off" style="width:400px;"></el-input>
                            </el-form-item>
                            <el-form-item label="角色类型" prop="roleType">
                                <!-- <select v-model="addForm.roleType"  style="width:200px;" >
                         <option v-for="(item,index) in roleTypeData":value="item.dictDetailValue">{{ item.dictDetailName }}</option>
                     </select>					 -->
                                <el-select v-model="addForm.roleType" placeholder="请选择" clearable>
                                    <el-option v-for="item in roleTypeData" :key="item.value" :label="item.dictDetailName" :value="item.dictDetailValue"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-form>
                        <div slot="footer" class="dialog-footer">
                            <el-button @click="addFormVisible = false">取消</el-button>
                            <el-button type="primary" @click="addSubmit" :loading="addLoading">提交</el-button>
                        </div>
                    </el-dialog>
                </div>
                <div style=" width:45%;float:right;">
                    <div class="clearfix">
                        <el-col :span="3" class="grid">
                            <el-button type="success" icon="el-icon-circle-plus-outline" @click="addRoleUser(1)" size="mini" round>新增</el-button>
                        </el-col>
                        <el-col :span="1" class="grid">
                            <el-button type="danger" icon="el-icon-delete" @click="deleteUserRole" size="mini" round>删除</el-button>
                        </el-col>
                    </div>
                    
                    <el-table :data="roleUserList" class="mgt20" @selection-change="roleuserSelectChange" border style="width: 100%" stripe ref="roleUserList" tooltip-effect="dark">
                        <!--勾选框-->
                        <el-table-column type="selection" width="55">
                        </el-table-column>
                        <!--索引-->
                        <el-table-column type="index" :index="indexMethod">
                        </el-table-column>
                        <el-table-column prop="userName" label="用户名称" width="180" sortable>
                        </el-table-column>
                        <el-table-column prop="targetId" label="用户编号" width="180">
                        </el-table-column>
                        <el-table-column prop="id" label="id" width="180">
                        </el-table-column>
                    </el-table>
                    <el-pagination @current-change="getRoleUserList" :current-page="roleusercurrentPage" :page-size="pageSize" layout="total, prev, pager, next" :total="roleusercount">
                    </el-pagination>
                    <br>
                    <!--新增界面-->
                    <el-dialog title="新增用户" :visible.sync="addRoleUserVisible" :close-on-click-modal="false">
                        <el-row>
                            <el-col :span="200" class="grid">
                                <el-input v-model="s_username" label="用户名称" placeholder="请输入内容" style="width:200px; heght:30px;" size="mini"></el-input>
                            </el-col>
                            <el-col :span="1" class="grid">
                                <el-button type="success" @click="addRoleUser(1)" icon="el-icon-search" size="mini">搜索</el-button>
                            </el-col>
                        </el-row>
                        <br>
                        <el-table :data="userData" @selection-change="userSelectionChange" border style="width: 100%" stripe ref="multipleTable" tooltip-effect="dark">
                            <!--勾选框-->
                            <el-table-column type="selection" width="55">
                            </el-table-column>
                            <!--索引-->
                            <el-table-column type="index" :index="indexMethod">
                            </el-table-column>
                            <el-table-column prop="userName" label="用户名称" width="180">
                            </el-table-column>
                            <el-table-column prop="id" label="用户编号">
                            </el-table-column>

                        </el-table>
                        <el-pagination @current-change="addRoleUser" :current-page="usercurrentPage" :page-size="pageSize" layout="total, prev, pager, next" :total="usercount">
                        </el-pagination>
                        <br>
                        <div slot="footer" class="dialog-footer">
                            <el-button type="primary" @click="saveUserRole" :loading="addLoading">保存</el-button>
                            <el-button @click="addRoleUserVisible= false">关闭</el-button>
                        </div>
                    </el-dialog>
                </div>
            </div>
        </div>
        <!-- 页面内容区end-->
    </div>
    <!-- 页面表格end -->
</template>
<script>
export default {
    data() {
        return {
            tableData: [],
            roleTypeData: [],
            roleUserList: [],
            userData: [],
            roleuserSelect: [],
            input: "",
            curentroleid: "",
            curentrow: null,
            //列表Loading加载   
            listLoading: false,
            //新增界面是否显示
            addFormVisible: false,
            //添加按钮Loading加载
            addLoading: false,
            //新增角色用户
            addRoleUserVisible: false,
            roletotal: 0,
            usercount: 0,
            roleusercount: 0,
            currentPage: 1,
            usercurrentPage: 1,
            roleusercurrentPage: 1,
            pageSize: 10,
            //检索字段
            s_rolename: "",
            s_rolecode: "",
            s_username: "",
            //     s_roleType:"",
            //输入框验证
            addFormRules: {
                roleName: [{ required: true, message: "请输入角色名称", trigger: "blur" }],
                roleCode: [{ required: true, message: "请输入角色编码", trigger: "blur" }],
                roleType: [{ required: true, message: "请输入角色类型", trigger: "blur" }]
            },
            //新增界面数据
            addForm: [],
            UserSelection: []
        }
    },

    methods: {
        handleSelect(key, keyPath) {
            console.log(key, keyPath);
        },
        indexMethod(index) {
            return index;
        },
        //获取角色列表
        getResult: function(val) {

            var _this = this;
            this.listLoading = true;
            let param = Object.assign({}, { currentPage: val, pageSize: 10, roleName: this.s_rolename, roleCode: this.s_rolecode });
            this.$ajax({
                method: "post",
                url: "/api/sysrole-api/querySysRoleList",
                data: param
            }).then(
                function(resultData) {

                    _this.tableData = resultData.data.data;
                    _this.roletotal = resultData.data.count;
                    _this.listLoading = false;
                },
                function(resultData) {
                    // _this.tableData.message = "Local Reeuest Error!";
                    //console.log(resultData);
                }
                );

        },
        handleSizeChange(val) {
            this.pageSize = val;
            this.getResult(1);

        },
        //新增
        addSubmit: function() {
            this.$refs.addForm.validate(valid => {
                if (valid) {
                    this.$confirm("确认提交吗？", "提示", {}).then(() => {
                        this.addLoading = true;
                        let param = Object.assign({}, this.addForm);
                        this.$ajax({
                            method: "post",
                            url: "/api/sysrole-api/addRole",
                            data: param
                        }).then(res => {
                            this.addLoading = false;
                            this.$message({
                                message: "提交成功",
                                type: "success"
                            });
                            this.$refs["addForm"].resetFields();
                            this.addFormVisible = false;
                            this.getResult(1);
                        });
                    });
                }
            });
        },
        getRoleType: function() {

            var _this = this;
            this.listLoading = true;
            let param = new URLSearchParams();
            param.append("code", "PT_ROLETYPE");
            this.$ajax({
                method: "post",
                url: "/api/execute/api/sysDict/Web/searchCodeSysDictDetail",
                data: param
            }).then(
                function(resultData) {
                    _this.roleTypeData = resultData.data.data;
                    //alert(_this.roleTypeData)

                },
                function(resultData) {
                    // _this.tableData.message = "Local Reeuest Error!";
                    //console.log(resultData);
                }
                );
        },
        //显示新增界面
        handleAdd: function() {
            this.addFormVisible = true;
            this.addForm = {
                id: 0,
                roleName: "",
                roleCode: "",
                roleType: ""
            };
        },
        //显示编辑角色界面
        enditRole: function(row) {
            var _this = this;
            this.listLoading = true;
            this.addFormVisible = true;
            let param = new URLSearchParams();
            param.append("id", row.id);

            this.$ajax({
                method: "post",
                url: "/api/sysrole-api/getSysRoleByid",
                data: param
            }).then(
                function(resultData) {

                    _this.addForm = resultData.data.data;
                    _this.listLoading = false;
                }
                );
        },
        delRole: function(row) {
            let param = new URLSearchParams();
            param.append("id", row.id);

            this.$ajax({
                method: "post",
                url: "/api/sysrole-api/deleteSysRoleByid",
                data: param
            }).then(
                function(resultData) {
                    this.$message({
                        message: "删除成功",
                        type: "success"
                    });
                },
                function(resultData) {
                    this.$message({
                        message: "删除失败",
                        type: "success"
                    });
                }
                );

        },
        getRoleUserList: function(val) {
            var _this = this;
            this.listLoading = true;
            let param = Object.assign({}, { currentPage: val, pageSize: 10, roleId: this.curentroleid });
            this.$ajax({
                method: "post",
                url: "/api/sysrole-api/queryRoleUserList",
                data: param
            }).then(
                function(resultData) {

                    _this.roleUserList = resultData.data.data;
                    _this.roleusercount = resultData.data.count;
                    //alert(_this.tableData);
                    //_this.listLoading = false;
                }
                );
        },
        clickRow: function(row) {
            this.roleuserSelect = [];
            // var roleid=row.id;
            var _this = this;
            this.curentroleid = row.id;
            this.curentrow = row;
            _this.getRoleUserList(1)

        },
        addRoleUser: function(val) {
            this.addRoleUserVisible = true;
            var _this = this;
            this.listLoading = true;
            let param = Object.assign({}, { currentPage: val, pageSize: 10, userName: this.s_username });
            this.$ajax({
                method: "post",
                url: "/api/sysuser-api/querySysUserList",
                data: param
            }).then(
                function(resultData) {

                    _this.userData = resultData.data.data;
                    _this.usercount = resultData.data.count;
                    //alert(_this.tableData);
                    //_this.listLoading = false;
                }
                );

        },
        deleteRoleUser: function() {
            let param = new URLSearchParams();
            param.append("id", row.id);

            this.$ajax({
                method: "post",
                url: "/api/sysrole-api/deleteSysRoleUserByid",
                data: param
            }).then(
                function(resultData) {
                    this.$message({
                        message: "删除成功",
                        type: "success"
                    });
                }
                );

        },
        userSelectionChange: function(val) {
            //alert(val);
            this.UserSelection = val;
        },
        roleuserSelectChange: function(val) {
            this.roleuserSelect = val;
        },
        saveUserRole: function() {
            if (this.curentroleid == "") {
                alert("请选择要添加的角色，单击选择行。");
            }
            var rows = this.UserSelection;
            if (rows) {
                rows.forEach(row => {
                    var _this = this;
                    this.listLoading = true;
                    let param = Object.assign({}, { id: 0, roleId: this.curentroleid, targetId: row.id });
                    this.$ajax({
                        method: "post",
                        url: "/api/sysrole-api/saveRoleUser",
                        data: param
                    }).then(
                        function(resultData) {

                        }
                        );
                    // alert(row.id)
                });
            }
            // this.$refs["addRoleUser"].resetFields();
            this.addRoleUserVisible = false;
            this.clickRow(this.curentrow);
            //alert(this.UserSelection);
        },
        deleteUserRole: function() {
            var rows = this.roleuserSelect;
            if (rows) {
                rows.forEach(row => {
                    var _this = this;
                    this.listLoading = true;
                    let param = new URLSearchParams();
                    param.append("id", row.id);
                    this.$ajax({
                        method: "post",
                        url: "/api/sysrole-api/deleteSysRoleUserByid",
                        data: param
                    }).then(
                        function(resultData) {

                        }
                        );
                });
            }
            this.addRoleUserVisible = false;
            this.clickRow(this.curentrow);
        }
    },
    mounted() {
        //获取列表
        this.getResult();
        this.getRoleType();

    }
};
</script>
<style>
/* #app {
        font-family: Helvetica, sans-serif;
        text-align: center;
    } */


/* #roleuser {
        font-family: Helvetica, sans-serif;
        text-align: center;
    }    
    el-input{width:200px;height: 50px;} */
</style>